<template>
  <div class="chat-content">
    <!-- recordContent 聊天记录数组-->
    <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto" :style="{marginTop:`${myLeft}px`}">
      <div v-for="(itemc,indexc) in recordContent" :key="indexc">
        <!-- 对方 -->
        <div class="word" v-if="!itemc.mineMsg">
          <img :src="itemc.headUrl">
          <div class="info">
            <p class="time">{{ itemc.nickName }} {{ chatTime(itemc.timestamp) }}</p>
            <div class="info-content">
              <pre>{{ itemc.contactText }}</pre>
            </div>
          </div>
        </div>
        <!-- 我的 -->
        <div class="word-my" v-else>
          <div class="info">
            <p class="time">{{ itemc.nickName }} {{ chatTime(itemc.timestamp) }}</p>
            <div class="info-content">{{ itemc.contactText }}</div>
          </div>
          <img :src="itemc.headUrl">
        </div>
      </div>
    </ul>

    <el-input
      class="my-input"
      placeholder="请输入内容"
      v-model="word"
      @keyup.enter.native="addUserWord"
      clearable>
    </el-input>
    <div class="ask-btn">
      <el-button v-for="item in questionList[questionFocusIndex]" :key="item" :size="'mini'" class="ask-btn-item"
                 @click="answer(item)">{{ item }}
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myLeft: 0,
      questionList: [
        ["详细说说提高能源效率的举措", "详细说说推广清洁能源的举措", "详细说说优化供应链管理的举措", "详细说说推广员工节能意识的举措"],
        ["给出一些关于范围一减排方案", "给出一些关于范围二减排方案", "给出一些关于范围三减排方案"]
      ],
      questionFocusIndex: 0,
      interval: null, // 计时器
      timeStep: 10, // 运动时间间隔
      word: "",
      testCount: 0,
      recordContent: [],
      // 备选回答答案
      answerList: [
        `作为一名碳管理规划师，我可以向您提供以下几点建议，帮助您减少能源间接排放的排放量：
1. 提高能源效率：通过采用高效设备、优化工艺流程、使用更加节能的照明系统等手段，提高企业的能源利用效率，降低单位产品能耗，从而减少能源间接排放的排放量。
2. 推广清洁能源：将清洁能源（如风能、太阳能等）应用于企业的生产和供能过程中，以取代使用化石燃料等传统能源，可以有效地降低能源间接排放的排放量。
3. 优化供应链管理：针对供应商的选择、合作和管理，可以选择能源效率高、环保标准高、节能减排的供应商，降低供应链中的能源间接排放量。
4. 推广员工节能意识：通过加强员工的节能教育、提高员工的节能意识，鼓励员工在工作和生活中采取更加环保、节能的行为，从而减少企业的能源间接排放量。
总之，减少能源间接排放的排放量需要从多个方面入手，采取综合措施，全面推进企业的低碳转型，从而实现可持续发展。`,
        `优化供应链管理是减少能源间接排放的一项关键措施，下面是几种具体的举措：
1. 确认供应商的碳排放量：对于重要的供应商，可以要求他们提供碳排放量的数据，并对其进行核实，以了解他们在生产和运输过程中的能源使用和排放情况。
2. 选择环保的供应商：在选择供应商时，可以优先选择环保、能源效率高的供应商。对于供应商的环境政策和节能减排措施，可以要求他们提供相关的证明文件。
3. 约定供应商的减排目标：与供应商签署碳减排合同，约定其在一定时间内实现的碳减排目标，鼓励其采取有效的节能减排措施。
4. 促进供应商的碳管理：与供应商进行交流，提供碳管理的建议和帮助，共同推动供应链上的碳减排。
5. 优化物流管理：对于进入企业的原材料和出厂的产品，可以优化物流管理，采用更加节能的运输方式和更加高效的仓储管理方法，减少能源间接排放的排放量。
6. 推广绿色采购：采购环保、节能、低碳的产品和服务，鼓励供应商生产和提供更加环保、低碳的产品和服务，从而促进整个供应链的低碳转型。
这些措施可以有效地减少企业的能源间接排放，提高供应链的环保和能源效率水平，从而推进企业的可持续发展。`,
        `作为一位碳管理规划师，我可以为您提供一些减排方案来降低您的范围三排放。范围三排放通常是指企业的间接排放，包括供应链、员工交通、出差等。
以下是一些可能的减排方案：
1. 供应链优化：通过选择低碳、环保的供应商和材料来降低范围三排放。您可以要求供应商提供环保证明或低碳排放数据，从而更好地管理供应链。
2. 节能措施：通过采用能源效率技术或减少资源浪费来降低范围三排放。例如，您可以升级设备或实施能源管理计划，从而减少能源消耗和排放。
3. 减少员工通勤：通过鼓励员工使用公共交通或其他低碳交通方式来减少员工通勤产生的碳排放。您可以提供公共交通优惠或自行车停车设施等措施来鼓励员工使用低碳交通方式。
4. 减少商务旅行：通过采用视频会议、远程办公等技术，减少商务旅行对环境的影响。您可以制定出差政策，鼓励员工使用视频会议等替代方案。
5. 碳中和计划：通过购买碳补偿、植树等方式来抵消企业的碳排放量，从而实现碳中和。您可以选择合适的碳补偿项目或合作伙伴来实现碳中和目标。
以上是一些可能的减排方案，当然具体的减排措施需要结合企业的具体情况和实际情况来制定，希望能够对您有所帮助。`,
        `作为碳管理规划师，我建议您可以采取以下几种措施来降低矿用钢产品原材料获取阶段的碳排放：
1. 优化原材料的选择：尽可能选择本地产地且质量可靠的原材料，减少运输过程中的能源消耗和碳排放。
2. 节约能源：在采矿、炼钢生产和加工等环节中采用节能技术和设备，减少所需能源和碳排放。
3. 实施循环经济模式：试图在生产过程中实现资源的再利用与回收，例如废钢回收、废弃物利用，减少对原材料的需求，进而减少碳排放。
4. 推行碳交换/碳汇贸易机制：通过政策鼓励企业自愿在国内外购买相应数量的碳排放权，使碳排放具有经济成本，进而促进企业减少碳排放。
综上所述，限制原材料获取阶段的碳排放是一项复杂而长期的任务。通过以上措施的执行，企业可以逐步降低其矿用钢产品原材料获取阶段的碳排放，实现可持续发展。`,
        `作为碳管理规划师，我们可以采用以下措施来降低矿用钢原材料获取阶段的碳排放量，从而有效减少产品的碳足迹：
1. 选择低碳材料：选择碳排放量较低的原材料和能源，例如使用再生钢材。
2. 采用节能技术：在采矿、运输、加工等环节中采用先进的节能技术，例如提高矿石回收率、合理使用爆破等，减少所需能源和碳排放。
3. 加强供应链管理：加强与供应商的沟通和协作，建立可持续采购体系，推动供应链优化，减少不必要的运输和碳排放。
4. 推广循环经济：开展废旧金属回收再利用，实现资源的最大化利用，减少对新材料的需求和碳排放。
5. 使用清洁能源：采用太阳能、风能等清洁能源替代传统能源，减少温室气体的排放。
总之，在生产过程中，我们可以通过选择低碳材料、采用先进的节能技术、加强供应链管理、推广循环经济和使用清洁能源等措施来降低碳排放。我们还可以通过建立企业碳足迹核算与管理机制，实施能源管理，优化生产过程，促进可持续发展，减少企业的碳足迹。`,
        `好的，作为碳管理规划师，以下是一些可以优化炼钢工艺以减少碳排放的建议：
1. 使用可再生能源：您可以考虑使用可再生能源来替换传统的非可再生能源。例如将太阳能、风力发电等新型能源引入到发电系统中，从而降低企业的碳排放量。
2. 废弃物回收利用：在炼钢过程中，废渣和废气也是主要的排放来源。您可以考虑采用先进的废弃物回收利用技术，将这些废弃物转化为可再利用的资源，既可以减少碳排放，又可以降低企业的生产成本。
3. 优化炼钢流程：可以对炼钢流程进行优化。例如，增加高炉渣的净化过程，改善废气的处理方式，改进加料设备的结构等，从而降低碳排放。
4. 采用新型材料：在选择材料时，可以使用新型材料和高效合金。这些材料在组织结构、机械性能和耐蚀性等方面都具有出色的特点，同时还能减少炼钢过程中的碳排放。
5. 加强节能管理：通过加强节能管理，降低炼钢过程中的能耗，同时也能减少碳排放。例如，可以优化冷却水回收利用，提高设备的自动控制水平，加强能耗监测和优化等方面进行加强。
这些是一些可以实施的建议，您可以根据实际情况选择实施最适合您企业的方案。`,
        `好的，以下是一些优化炼钢流程的具体举措：
1. 优化原料的配比：根据生产需要，合理调整原料比例，使每个原料在炼钢过程中发挥最大作用，减少不必要的耗能，从而降低碳排放。
2. 改善高炉渣的处理方式：减少高炉渣的形成量和温度，提高高炉渣的脱硫效率，减少碳氧化物的排放。
3. 改进加料设备的结构：采用先进的加料设备，可以将原材料更加均匀地投入高炉中，减少废气排放。
4. 优化废气处理技术：对废气进行合理的收集和处理，例如可以采用湿法除尘技术和脱硫、脱氮等多种废气处理手段。这些措施可以有效地减少污染物的排放，降低碳排放。
5. 加强自动化控制：引入先进的自动化控制技术，可以实现精细化管理和智能化控制，降低人工干预的程度，提高生产效率，同时也可以减少碳排放。
6. 推广新型材料和高效合金：通过推广使用新型材料和高效合金，降低生产过程中的碳排放，同时还可以提高产品的质量和性能。
希望以上举措能够为您提供参考。`
      ]
    }
  },
  methods: {
    chatTime() {
      return ''
    },
    load() {
    },
    // 添加用户输入到聊天框中
    addUserWord(word) {
      if (word) {
        this.recordContent.push({
          mineMsg: true,
          headUrl: require("@/assets/yong.png"),
          nickName: "用户",
          contactText: word
        })
        return
      }
      this.recordContent.push({
        mineMsg: true,
        headUrl: require("@/assets/yong.png"),
        nickName: "用户",
        contactText: this.word
      })
      this.word = ""
    },
    // 逐个输出文字内容到聊天框中
    dealWord(word, stop, speed) {
      var _this = this
      var newWordIndex = 0;
      _this.recordContent.push({
        mineMsg: false,
        headUrl: require("@/assets/kefu.png"),
        nickName: "智能减排顾问",
        contactText: ""
      })
      this.interval = setInterval(function () {
        if (newWordIndex > word.length) {
          console.log("quit")
          clearInterval(_this.interval)
        }
        if (!stop) {
          _this.myLeft -= speed || 0.2
        }
        _this.recordContent[_this.recordContent.length - 1].contactText += word.charAt(newWordIndex)
        newWordIndex += 1
      }, _this.timeStep)
    },

    answer(word) {
      this.addUserWord(word)
      if (word == "详细说说优化供应链管理的举措") {
        this.dealWord(this.answerList[1], false, 0.2)
        this.questionFocusIndex = 1
      } else if (word == "给出一些关于范围三减排方案") {
        this.dealWord(this.answerList[2], false, 0.3)
      }
    }
  },
  mounted() {
    this.dealWord(this.answerList[0], true)
  },
  beforeDestroy() {
    clearInterval(this.interval)
  },
}
</script>

<style lang="scss">
.ask-btn {
  position: fixed;
  bottom: 50px;
  left: 450px;
}

.my-input {
  position: fixed;
  left: 30%;
  bottom: 10%;
  width: 800px;
}

.chat-content {
  width: 100%;
  padding: 20px;

  .word {
    display: flex;
    margin-bottom: 20px;
    max-width: 600px;

    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .info {
      margin-left: 10px;

      .time {
        font-size: 12px;
        color: #000;
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin-top: -5px;
      }

      .info-content {
        padding: 10px;
        font-size: 14px;
        background: #94dba0;
        position: relative;
        margin-top: 8px;
      }

      //小三角形
      .info-content::before {
        position: absolute;
        left: -8px;
        top: 8px;
        content: '';
        border-right: 10px solid #94dba0;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
    }
  }

  .word-my {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;

    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .info {
      width: 90%;
      margin-left: 10px;
      text-align: right;

      .time {
        font-size: 12px;
        color: rgba(51, 51, 51, 0.8);
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin-top: -5px;
        margin-right: 10px;
      }

      .info-content {
        max-width: 70%;
        padding: 10px;
        font-size: 14px;
        float: right;
        margin-right: 10px;
        position: relative;
        margin-top: 8px;
        background: #A3C3F6;
        text-align: left;
      }

      //小三角形
      .info-content::after {
        position: absolute;
        right: -8px;
        top: 8px;
        content: '';
        border-left: 10px solid #A3C3F6;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
      }
    }
  }
}
</style>
